<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Learning English</title>
        <meta name="keywords" content="learning english" />
        <meta name="description" content="Learning English" />
        <link href="css/video_style_parent.css" rel="stylesheet" type="text/css" />
        <link href="css/video_style.css" rel="stylesheet" type="text/css" />

        <link rel="stylesheet" type="text/css" href="css/slider_styles.css" />
        <script type="text/javascript" src="scripts/jquery-1.8.3.min.js"></script>
        <script type="text/javascript" src="scripts/JSON.js"></script>
        <script type="text/javascript" src="scripts/video-control.js"></script>
        <script type="text/javascript" src="scripts/jquery.js"></script>
        <script type="text/javascript" src="scripts/jquery.validate.js"></script>
        <script type="text/javascript" src="scripts/main.js"></script>
        
    </head>
    <body>
        <div id="fb-root"></div>
        <script>(function(d, s, id) {
                var js, fjs = d.getElementsByTagName(s)[0];
                if (d.getElementById(id))
                    return;
                js = d.createElement(s);
                js.id = id;
                js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
                fjs.parentNode.insertBefore(js, fjs);
            }(document, 'script', 'facebook-jssdk'));
        </script>
        <div id="templatemo_body_wrapper">
            <div id="templatemo_wrapper">

                <div id="templatemo_header">
                    <div id="site_title"><h1><a href="#">Learning English</a></h1></div>
                    <div id="templatemo_menu">
                        <ul>
                            <li><a href="#" class="current">Home</a></li>
                            <li><a href="#">Category</a></li>
                            <li><a href="#">About</a></li>
                            <li><a href="#">Contact</a></li>
                            <li><a href="#" class="last">Sign in/Sign Up</a></li>
                        </ul>
                    </div> <!-- end of templatemo_menu -->
                </div><!-- end of header -->

                <!--        <div id="templatemo_middle">
                            <div id="mid_left">
                                <div id="mid_title">Lorem ipsum dolor sit amet</div>
                                <p>Sectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                                                <p>nostrud exercitation ullamco laboris nisi ut aliquip exa com consequat. Duis aute irure dolor in reprehenderit.</p>
                                <a href="#" class="viewall"></a>
                            </div>
                            <img src="images/templatemo_icon_01.png" alt="free for job" />
                        </div>  end of middle -->

                <div id="templatemo_main">

                    <div class="cbox_fw">
                        <div class="cbox_large float_l">
                            <h2 class="metro-header">The Infographics Show Kissing</h2>
                            <h5 class="tw_bullet">Video</h5>
                            <iframe id="player" width="500" height="290" src="http://www.youtube.com/embed/gnT8pD9eSCc" frameborder="0" allowfullscreen></iframe>
                            <div class="comment-list">
                                <div class="fb-comments" data-href="http://www.haivl.com/photo/217688" data-width="470" data-num-posts="1"></div>
                            </div>
                        </div>
                        <div class="cbox_list float_r">
                            <h5 class="tw_bullet">Control</h5>
                            <div id="hintContainer" class="" style="">
                                <div id="videoController">
                                    <a id="btnBack5Sec" class="btn btn-success" href="#">
                                        <strong class="metro-icon"></strong><span class="metro-text">5 second</span></a>
                                    <a id="btnNext5Sec" class="btn btn-success" href="#">
                                        <strong class="metro-icon"></strong> <span class="metro-text">5 second</span></a>
                                    <a id="btnAutoScroll" class="btn btn-info" href="#">
                                        <i class="metro-icon icon-ok-sign icon-white"></i>
                                        <span class="metro-text">Auto Scroll</span></a>			
                                    <div id="answerStat" class="pull-right" style="">

                                        <span class="metro-ic-text" id="totalAnswer">0</span>
                                        <span class="metro-ic-text" id="mark">/ </span>  
                                        <span class="metro-ic-text" id="totalQuestion">28</span>
                                        <span class="metro-text">Number of answers :</span> 
                                    </div>
                                </div>
                                <div id="hintList">
                                    <span class="hintItem">elaidinic</span>
                                    <span class="hintItem">eliminating</span>
                                    <span class="hintItem">edifier</span>
                                    <span class="hintItem">ectocommensal</span>
                                    <span class="hintItem">epithumetic</span>
                                    <span class="hintItem">eliminations</span>
                                    <span class="hintItem">enumerative</span>
                                    <span class="hintItem">enneasyllabic</span>
                                    <span class="hintItem">erotics</span>
                                    <span class="hintItem">embitterments</span>
                                    <span class="hintItem">eclipses</span>
                                    <span class="hintItem">eucharistize</span>
                                </div>
                            </div>


                            <div id="displayContentContainer" class="" style="display: block;">
                                <div id="displayContent">
                                    <form method="post" id="answerForm">
                                            

                                    </form>

                                </div>

                            </div>
                            <div class="actions" id="finishAction">
                                <a class="btn btn-primary" id="btnSubmitVideoAnswer" data-loading-text="Đang gửi bài làm" title="Gửi bài làm của bạn và nhận kết quả" href="#"><i class="metro-icon"></i><span class="metro-text">Submit</span></a>
                                <a class="btn btn-info" id="btnReset" title="Hoàn tất bài làm" href="#"><i class="metro-icon"></i><span class="metro-text">Try Again</span></a>
                                <a class="btn btn-danger pull-right" id="btnOpenReportDialog" href="#"><i class="metro-icon icon-bell"></i><span class="metro-text">Notify Error</span></a>			
                            </div>
                            <div id="highscoreContainer">
                                <h5 class="tw_bullet">Score</h5>

                                <div id="highscoreList">
                                    <div id="yw0" class="grid-view">
                                        <div class="summary"></div>
                                        <table class="items table">
                                            <thead>
                                                <tr>
                                                    <th id="yw0_c0">&nbsp;</th><th id="yw0_c1">Users</th><th id="yw0_c2">Points</th><th id="yw0_c3">Time</th></tr>
                                            </thead>
                                            <tbody>
                                                <tr class="odd"><td><img width="32px" src="http://graph.facebook.com/100000026173154/picture?type=large" alt=""></td><td><a href="/profile/656/tube201">tube201</a></td><td>1160</td><td>24-03-2013</td></tr>
                                                <tr class="odd"><td><img width="32px" src="http://graph.facebook.com/100000026173154/picture?type=large" alt=""></td><td><a href="/profile/656/tube201">tube202</a></td><td>1100</td><td>02-03-2013</td></tr>
                                                <tr class="odd"><td><img width="32px" src="http://graph.facebook.com/100000026173154/picture?type=large" alt=""></td><td><a href="/profile/656/tube201">tube203</a></td><td>900</td><td>15-01-2013</td></tr>
                                            </tbody>
                                        </table>
                                        <div class="keys" style="display:none" title="/play/162/Bill+Gates+l%C3%A0m+t%E1%BB%AB+thi%E1%BB%87n+"><span>3909</span></div>
                                    </div>						
                                </div>
                            </div>



                        </div>
                        <div class="cleaner"></div>
                    </div>

                </div> <!-- end of main -->

                <div id="latest_works">
                    <h2>Find us on Facebook</h2>
                    <div class="fb-like-box" data-href="http://www.facebook.com/voalearningenglish" data-width="920" data-height="210" data-show-faces="true" data-stream="false" data-header="false"></div>
                </div> <!-- end of templatemo_middle -->

            </div>
        </div>

        <div id="templatemo_footer_wrapper">
            <div id="templatemo_footer">
                Copyright © 2072 <a href="#">......</a> | Designed by SanhNX
                <div class="cleaner"></div>
            </div>
        </div>

    </body>
</html>